<script setup lang="ts">
import type { PropType } from 'vue'
import PreviewImageImages from '@/pages/orderDetail/components/previewImage-images.vue'
import { FormType, type RemarkItem } from '@/pages/order/types'

const $props = defineProps({
  remark: { type: Object as PropType<RemarkItem[]>, required: true },
})
</script>

<template>
  <view v-show="remark.length > 0" class="remark-view">
    <view v-for="item in remark" :key="item.key">
      <view>
        <text class="remark-view--key">{{ item.key }}：</text>
        <view v-if="item.type === FormType.IMAGE" class="remark-view--image">
          <preview-image-images :images="[item.value]" height="80" width="100rpx" />
        </view>
        <text v-else class="remark-view--remarkKey"> {{ item.value }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
@include b(remark-view) {
  width: 100%;
  display: flex;
  flex-direction: column;
  @include m(image) {
    margin-bottom: 20rpx;
  }
}
</style>
